<script setup lang="ts">
import {useLoginStore} from "../store/user";
const loginStore= useLoginStore();


</script>

<template>
  <div class="bgci">
  <div class="Main">
      <div class="LoginSmall">
    <img src="../assets/images/LoginSmall.png" style="width: 360px;height: 200px;z-index: 3;">
  </div>
    <van-cell-group inset>

      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model.trim="loginStore.loginFrom.phone"   placeholder="请输入手机号码"
                 required clearable left-icon="phone"/>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field  v-model.trim="loginStore.loginFrom.password" placeholder="请输入密码" type="password" left-icon="eye"  >
      </van-field>
    </van-cell-group>
    <van-button type="primary" :disabled=loginStore.loginButton @click="loginStore.handleLogin">登录</van-button>
  </div>
  <p style="opacity: 0.5; font-style: italic; font-size: 10px;margin-top: 5px;text-align: right;">云电子胶片系统</p>
</div>

</template>



<style >
.Main{
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: space-between;
  /* 卡片离顶部的高度 */
  margin-top: 250px;
  background-color: #fff;
  /* 可以将登录卡片的边缘变圆 后面的数字是程度 */
  /* border-radius: 1ch; */
  padding-top: 8px;
 
}
.Main .van-field__left-icon{
 margin-right: 10px;
}
.bgci{
  width: 100%;
  height: 700px;
  /* 如果插入图片这个注释打开 把下面的background打上注释 */
  /* background-image: url("../assets/images/LoginBackground.png"); */
  position: absolute;
  overflow-y: hidden;
  /* 颜色在这里调 */
  background: linear-gradient(#7cb6f0, white);
  padding: 15px;
  /* text-align: right; */
}

.LoginSmall{
  position: absolute;
  left: 18%;
  top: 8%;
}


    

</style>